<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>

        <div class="form-group">
            <label for=""></label>
            <textarea class="form-control" name="" id="" rows="3" maxlength="120" placeholder="请输入要BB的内容(最对BB120个字)"></textarea>
        </div>
        <mt-button type="primary" size="large">发表评论</mt-button>

        <div class="cmt-list" v-for="(item, i) in comments" :key=i>
            <div class="cmt-item">
                <div class="cmt-title">
                    第{{ i+1 }}楼&nbsp;&nbsp;用户:{{ item.user_name }}&nbsp;&nbsp;发表时间:{{ item.add_time | dataFormat}}
                </div>
                <div class="cmt-body">
                    {{ item.content === undefined ? "此用户很懒，什么都没说": item.content }}
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    export default {
        name: "comment",
        data(){
            return {
                pageindex:1,
                comments:[]
            }
        },
        props:["id"],
        created() {
            this.getComments();
        },
        methods:{
            getComments(){
                this.$http.get('api/getcomments/' + this.id + '?pageindex=' + this.pageindex)
                .then(result => {
                    if(result.body.status ===0){
                        this.comments = this.comments.concat(result.body.message);
                    }else {
                        Toast("获取评论失败")
                    }
                });
            },
            getMore(){
                this.pageindex++;
                this.getComments();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .cmt-container{
        h3{
            font-size: 18px;
        }
        textarea{
            font-size: 14px;
            height: 85px;
            margin: 0;
        }
        .cmt-list{
            margin: 10px 0;
            .cmt-item{
                font-size: 13px;
            }
            .cmt-title{
                line-height: 30px;
                background-color: #ccc;
            }
            .cmt-body{
                line-height: 35px;
                text-indent: 2em;
            }
        }
    }
</style>